<!-- 
  1）v-if 和 v-show 的区别
    1）v-if是控制真正的渲染或销毁，而不是显示与隐藏
    2）v-show通过css display来控制显示与隐藏
    3）频繁切换显示状态用v-show，否则使用v-if

  ------------------------------------

  2）为何 v-for 中要用 key
    1）diff算法中通过tag和key来判断是否是sameNode.
    2）updateChildren中有了key，可以尽可能复用vnode，可以减少渲染次数，提升渲染性能。
    3）key，不能是index和random。一般都是以id作为key。

  ------------------------------------

  3）描述 vue 组件生命周期（以及有父子组件，两者的生命周期）
    1）单个组件的生命周期（那个图，你能不能画出来，能不能说出来）
    2）父子组件嵌套的生命周期（也是一个面试题）

  ------------------------------------

  4）组件间如何通讯
    1）9大组件通信方案

  ------------------------------------

  5）组件初次渲染和更新的过程
    初次渲染：
      第一步：解析模板为render函数
      第二步：触发响应式，监听data中的属性，getter和setter
      第三步：执行render函数，生成vnode， 进而进行patch(elem,vnode)
        A）这一步会触发data getter，在getter中进行依赖收集（把数据“观察”起来）。
        注意：不一定是所有的数据都会被观察。是否被观察取决于模板中是否使用。
      第四步：把vnode转化成真实DOM，渲染到页面上。
    更新过程：
      第一步：修改数据，会触发data setter
      第二步：重新执行render函数，生成新的vnode（newVnode）
      第三步：进行patch(vnode,newVnode),patch的过程就是diff的过程

  ------------------------------------

  6）双向数据绑定 v-model 的原理
    看一下之前讲的视频。

  ------------------------------------

  7）说一下对 MVVM 的理解
    数据驱动视图。如何达到数据驱动视图：vdom。
    简单的回答：只回答图上的内容 https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=mvvm&step_word=&hs=0&pn=0&spn=0&di=7214885350303334401&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=673888355%2C3365485600&os=383766179%2C1059975381&simid=673888355%2C3365485600&adpicid=0&lpn=0&ln=1197&fr=&fmq=1679387608751_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined&copyright=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=https%3A%2F%2Fimg.jbzj.deiniu.com%2Ffile_images%2Farticle%2F201804%2F2018418101120793.jpg%3F2018318101136&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3B1jtgt7_z%26e3Bv54AzdH3Fw6ptvsjAzdH3F8nbn00_z%26e3Bip4&gsm=1e&rpstart=0&rpnum=0&islist=&querylist=&nojc=undefined&dyTabStr=MCwzLDEsNiw0LDUsMiw3LDgsOQ%3D%3D

    复杂的回答：组件初次渲染和更新的过程

  ------------------------------------

  8）computed 和 method 的区别？
      computed:
        提高性能，根据已有状态计算出新的状态，当依赖的状态发生了变化，会重新计算。有缓存功能。
      method:
        没有缓存

  ------------------------------------

  9）为何组件 data 必须是一个函数？
      组件是可以复用，如果data是一个对象，多个组件实例中的data指向同一个堆空间。

  ------------------------------------

  10）ajax 请求应该放在哪个生命周期？
    mounted   js是单线程，ajax是异步获取数据，阻塞不了生命周期往下执行。
    放在created里面，也快不了多少时间。

  ------------------------------------

  11）如何将组件的所有 props 传递给子组件？—— $props
    Layout.vue
     <User v-bind="$props" />

  ------------------------------------

  12）如何自己实现一个 v-model ？

  ------------------------------------

  13）多组件有相同的逻辑，如何抽离？
    mixin
    mixin的一些缺点

  ------------------------------------

  14）何时需要使用异步组件？
    加载大组件
    路由中异步加载

  ------------------------------------

  15）何时需要使用 keep-alive
    缓存组件，不需要重复渲染
    如多个静态tab页切换。
    优化性能。

  ------------------------------------

  16）何时需要使用 beforeDestroy ？
      清除定时器
      解绑自定义事件 $off
      解决原生DOM事件 scroll

  ------------------------------------

  17）什么是作用域插槽？为何需要它
    也是组件通信一种方案，使用作用域插槽实现子传父

  ------------------------------------

  18）vuex 的 action 和 mutation 有何区别？
    action中可以处理异步逻辑，mutation是改变状态的唯一途经。
    mutation是原子操作。
    action还可以整合多个mutation

  ------------------------------------

  19）vue-router 路由模式有几种？
    hash最简单，推荐使用
    history 需要后端支持，否则会造成404

  ------------------------------------

  20）如何配置 vue-router 异步加载？
    {
      path:"/home",
      component:()=>import("../component/Home.vue")
    }

  ------------------------------------

  21）场景题：用虚拟 DOM 描述一个 html 结构

  ------------------------------------

  22）vue 如何监听 data 变化？
    Object.defineProperty
    递归深度监听，对数组的方法需要特殊处理。
    重写那7人方法。

  ------------------------------------

  23）vue 如何监听数组变化
    重新定义原型，重写push,pop等方法，实现监听。
    Proxy可以原生支持监听数组变化 Vue3中使用了Proxy。

  ------------------------------------

  24）响应式原理

  ------------------------------------

  25）简述 diff 算法过程
    h vnode
    path(elem,vnode) / path(vnode,newVnode)
    pathVnode, addVnodes, removeVnodes
    updateChildren key重要性

  ------------------------------------

  26）diff 算法时间复杂度是多少
    O(n)

  ------------------------------------

  27）vue 为何是异步渲染？
    合并data的修改，异步渲染，提高渲染性能
    $nextTick()

  ------------------------------------

  28）nextTick 有何作用？
    在DOM更新完之后，自动调用回调。

  ------------------------------------

  29）vue-router 如何监听路由变化？
    watch $route

  ------------------------------------

  30）vue 性能优化 （开发环境编译模板）
      1）合理使用v-show和v-if
      2）合理使用computed
      3）v-for加上key, 在vue2中避免和v-if连用。
      4）自定义事件，DOM事件及时销毁。
      5）合理使用异步组件。
      6）合理使用keeplalive
      7）data层级不要太深
      8）webpack层面的优化（后面复习webpack, webpack4）
      9）前端通用的性能优化方案，如图片懒加载...
      10）使用SSR

  ------------------------------------

 -->

<!-- 
  课件地址：  
    主地址：http://47.94.210.129/malulesson/
    备用地址：https://mxyhi.github.io/malulesson/


-->